<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>审核列表</title>
  <base href="${basePath}">
  <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
  <script src="static/plugins/jquery-3.1.0.js"></script>
  <script src="static/plugins/layui/layui.js"></script>
  <style>
    .layui-form-label {
      width: 70px;
    }
  </style>
</head>
<body style="padding: 15px;background-color: whitesmoke;">
<div class="layui-layout layui-layout-admin">
  <%--审核列表的查询栏--%>
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form">
        <form class="layui-form" id="searchForm" lay-filiter="searchForm">
          <label for="applyDriver" class="layui-form-label">司机</label>
          <div class="layui-input-inline">
            <select name="status" id="applyDriver">
              <option value="">[选择司机]</option>
              <option value="1">自驾</option>
              <option value="2">指定司机</option>
            </select>
          </div>
          <div class="layui-form-item layui-inline">
            <label for="applyCar??" class="layui-form-label">车辆</label>
            <div class="layui-input-inline">
              <select name="status" id="applyCar??">
                <option value="">[选择状态]</option>
                <option value="">????</option>
                <option value="">????</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item layui-inline">
            <div class="layui-input-inline">
              <button class="layui-btn" lay-submit lay-filter="search">查询</button>
              <button class="layui-btn" id="clear" type="button">清空</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <%--列表的展示数据--%>
  <div class="layui-card">
    <div class="layui-card-body">
      <table lay-filter="dataTable" id="dataTable"></table>
    </div>
  </div>
  <div class="layui-footer" style="left:0">底部固定区域</div>
</div>
</body>
<script>
  var form, table;
  function searchForm(field={}){
    table.reload('dataTable',{
      where:{
        param:"list",
        ...field
      },
      page:{
        curr:1
      }
    })
  }
  $(function () {
    layui.use(function () {
      form = layui.form;
      table = layui.table;
      // form.on("submit(search)", function ({field}) {
      //   searchForm(field);
      //   return false;
      // })
      // $("#clear").click(function () {
      //   $("#searchForm")[0].reset();
      //   searchForm();
      // })
      table.render({
        elem: "#dataTable",
        url: "apply",
        where: {
          param: "list"
        },
        // toolbar: "#tableTemplet",
        page: true,
        limit: 5,
        limits: [5, 10, 15, 20, 50],
        parseData(res) {
          let code = 0;
          if (res.code !== 200) {
            code = res.code;
          }
          return {
            code,
            msg: res.msg,
            count: res.data.count,
            data: res.data.list
          }
        },
        cols: [[
          {field: "id", title: "编号"},
          {field: "name", title: "申请人"},
          {field: "name", title: "申请司机"},
          {field: "name", title: "申请车辆"},
          {field: "name", title: "用车时间"},
          {title: "操作", templet: "#optTemplet", fixed: "right"}
        ]]
      })

      table.on("tool(dataTable)", function ({event, data}) {
        switch (event) {
          case "update":
            sessionStorage.setItem("dataId", data.id)
            layer.open({
              type: 2,
              title: "信息",
              area: ["500px", "500px"],
              content: "apply?param=edit"
            })
            break;
          // case "delete":
          //   layer.confirm('确定删除编号【' + data.id + '】的数据吗？', {icon: 3,title: "询问"}, function (index) {
          //     $.ajax({
          //       url: "apply",
          //       method: "post",
          //       data: {
          //         param: "delete",
          //         id: data.id
          //       },
          //       dataType:"json",
          //       success({code,msg}){
          //         if(code === 200){
          //           layer.msg("删除成功！",{icon:6})
          //           table.reload('dataTable');
          //         }else{
          //           layer.alert(msg,{icon:5});
          //         }
          //       }
          //     })
          //     layer.close(index);
          //   })
          //   break;
          // case "status":
          //   let {id, status} = data;
          //   let confirmHtml = '<span style="cole:red">禁用</span>';
          //   let updateStatus = 2;
          //   if (status === 2) {
          //     confirmHtml = '<span style="cole:green">可用</span>';
          //     updateStatus = 1;
          //   }
          //   layer.confirm("确定更改编号【" + data.id + '】的状态为' + confirmHtml + '吗？', {
          //     icon: 3,
          //     title: "询问"
          //   }, function (index) {
          //     $.ajax({
          //       url: "apply",
          //       data: {
          //         id,
          //         status: updateStatus,
          //         param: "update"
          //       },
          //       method: "post",
          //       dataType: "json",
          //       success(res) {
          //         if (res.code === 200) {
          //           layer.msg("更新状态成功！", {icon: 6});
          //           table.reload('dataTable');
          //         } else {
          //           layer.alert(res.msg, {icon: 5})
          //         }
          //       }
          //     });
          //     layer.close(index);
          //   })
          //   break;
          default:
            console.log("点击异常！");
            break;
        }
      });
      // table.on("toolbar(dataTable)", function ({event}) {
      //   switch (event) {
      //     case "add":
      //       layer.open({
      //         type:2,
      //         title:"添加",
      //         area:["500px","500px"],
      //         content:"apply?param=edit"
      //       })
      //       break;
      //     default:
      //       layer.alert("按钮点击异常！", {icon: 4});
      //       break;
      //   }
      // });
    })
  })
</script>
<script type="text/html" id="optTemplet">
  <button type="button" lay-event="update" class="layui-btn layui-btn-sm">审核</button>
  <button type="button" lay-event="delete" class="layui-btn layui-btn-sm">详情</button>
</script>
<%--<script type="text/html" id="tableTemplet">--%>
<%--  <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>--%>
<%--</script>--%>
</html>
